<template>
  <el-scrollbar style="height:500px">
    列表的 meta33
    <el-row :gutter="20">
      <el-col :span="7">
        <elForm
          v-model="gridBaseModel"
          v-bind="gridBaseProps"
        />
      </el-col>
      <el-col :span="13">
        列表
        <elGrid
          v-bind="girdProps"
          :data-list="dataList"
        />
      </el-col>
      <el-col :span="4">
        <el-scrollbar style="height:500px">
          <jsonformat :json="girdProps" />
        </el-scrollbar>
      </el-col>
    </el-row>
  </el-scrollbar>
</template>

<script>
import { ref, reactive, watch } from 'vue'
import VueDS from 'vue-data-state'

// 列表控件的 base 的json
import jsonGridBase from '../json/meta-grid-base.json'

</script>

<script setup>
import elForm from '/ctrl/nf-el-form/el-form-div.vue'
import elGrid from '/ctrl/nf-el-grid/nf-el-grid-list.vue'
import jsonformat from '../json-format/json-format.vue'

// 程序功能
// 表单控件的基础属性
const gridBaseModel = reactive({
  height: 400, // 高度, int
  idName: 'id', // 主键字段名, varhcar
  colOrder: [], // 显示字段, 数组
  stripe: false, // 斑马纹, bit
  border: false, // 纵向边框, bit
  fit: false, // 是否自撑开, bit
  'highlight-current-row': false // 要高亮当前行, bit
})
const gridBaseProps = reactive(jsonGridBase.formMeta)

// ==============

// 表单的 model
const dataList = reactive([])
const dataRow = ref({})

// 定义表单的 meta
const girdProps = reactive({
  controlId: 1,
  height: 400, // 高度, int
  idName: 'id', // 主键字段名, varhcar
  colOrder: [], // 显示字段, 数组
  stripe: false, // 斑马纹, bit
  border: false, // 纵向边框, bit
  fit: false, // 是否自撑开, bit
  highlightCurrentRow: false, // 要高亮当前行, bit
  itemMeta: {},
  reload: false
})

// 状态
const { reg, get } = VueDS.useStore()
const helpDataBaseMeta = get.helpDataBaseMeta()

// 表的model
const modelTable = helpDataBaseMeta.tableMeta
// 字段的 model 数据列表
const modelColumList = helpDataBaseMeta.columnListMeta

// 根据数据设置表单需要的meta
const setGridMeta = () => {
  dataRow.value = {}
  for (const key in modelColumList) {
    const item = modelColumList[key]
    // console.log(key, item)
    const colId = parseInt(item.columnId)
    // 添加 colOrder
    if (!girdProps.colOrder.includes(colId)){
      girdProps.colOrder.push(colId)
    }
    if (!gridBaseModel.colOrder.includes(colId)){
      gridBaseModel.colOrder.push(colId)
    }
    // 添加 itemMeta
    girdProps.itemMeta[colId] = {
      id: colId,
      colName: item.colName,
      label: item.cnName,
      width: 140,
      title: item.cnName,
      align: 'center',
      'header-align': 'center'
    }
    dataRow.value[item.colName] = item.cnName

    // 设置 表单控件基础属性的 显示字段
    const options = gridBaseProps.itemMeta['1010030'].optionList
    if (options.filter((a) => a.value === colId).length === 0){
      options.push({
        value: colId,
        label: item.cnName
      })
    }

  }

  girdProps.reload = !girdProps.reload
  // 添加测试数据
  dataList.length = 0
  for (const item of [1,2,3].values()){
    const newRow = {}
    Object.assign(newRow, dataRow.value)
    dataList.push(newRow)
  }
}

// 监听字段
watch(() => modelColumList, () => {
  setGridMeta()
},{deep:true})

// 监听列表自己的属性
watch(() => gridBaseModel, () => {
  Object.assign(girdProps, gridBaseModel)
  girdProps.reload = !girdProps.reload
},{deep:true})

</script>
